<template>
    <div class="updata-component" v-loading.fullscreen.lock="loading">
        <div class="demo-upload-box">
            <div v-if="imageUrlArr && imageUrlArr.length" class="demo-upload-image-box">
                <div v-for="(item,index) in imageUrlArr" :key="index" class="demo-upload-image">
                    <img :src="item">
                    <div class="demo-upload-box-cover">
                        <el-icon @click.native="handleView(index)">
                            <View/>
                        </el-icon>
                        <el-icon @click.native="handleRemove(index)">
                            <CircleCloseFilled/>
                        </el-icon>
                    </div>
                </div>
            </div>
            <div class="demo-upload-btn">
                <input :ref="name" :accept="accept" :multiple="multiple" class="file" type="file"
                       @change="handleSuccess">
                <div class="camera"></div>
                <input class="btn" type="button" @click="clickFile"/>
            </div>
        </div>
        <!-- 查看大图 -->
        <div v-if="bigPicSrc" class="big-pic" @click.self="bigPicSrc = ''">
            <img :src="bigPicSrc" class=""/>
        </div>
    </div>
</template>
<script>
import http from "../api/api.js"
import msg from "../utils/Message.js"
export default {
    name: "UploadImgs",
    props: {
        multiple: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        accept: {
            type: String,
            default: () => {
                return 'image/jpg,image/png'
            }
        },
        name: {
            type: String,
            default: () => {
                return 'uploadInput'
            }
        }
    },
    data() {
        return {
            bigPicSrc: '',
            imageUrlArr: [],
            filesData: [],
            loading:false
        }
    },
    methods: {
        // 文件上传接收
        handleSuccess(e) {
            this.loading = true
            let file = e.target.files[0];
            var fd = new FormData()
            fd.append('file', file)
            this.ajax(fd)
        },
        ajax(data) {
            http.HttpPost("UploadImg",data).then((res)=>{
                this.loading = false
                if (res.code == 0) {
                    msg.message(res.msg)
                    this.imageUrlArr.push(res.data.path)
                    this.filesData.push(res.data.id)
                    this.$emit('child',this.filesData)
                } else {
                    msg.message(res.msg, 'error')
                }
            })
        },
        clickFile() {
            const input = this.$refs[this.name]
            input.click()
        },
        // 删除上传的案例图
        handleRemove(index) {
            this.imageUrlArr.splice(index, 1)
            this.filesData.splice(index, 1)
            this.$forceUpdate()
        },
        // 查看大图
        handleView(index) {
            this.bigPicSrc = this.imageUrlArr[index]
        }
    }
}
</script>

<style lang="scss" scoped>
.updata-component {
    .demo-upload-box {
        display: flex;

        .demo-upload-image-box {
            display: flex;
        }

        .demo-upload-image {
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            border-radius: 4px;
            position: relative;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
            margin-right: 4px;

            img {
                width: 60px;
                height: 60px;
            }

            .demo-upload-box-cover {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                display: none;
                background: rgba(0, 0, 0, 0);
            }

            &:hover {
                .demo-upload-box-cover {
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    display: block;
                    background: rgba(0, 0, 0, 0.3);
                }

                .demo-upload-box-cover .ivu-icon {
                    color: #fff;
                    font-size: 20px;
                    cursor: pointer;
                    margin: 0 2px;
                }
            }
        }

        .demo-upload-btn {
            position: relative;
            width: 60px;
            height: 60px;
            background: #fff;
            border: 1px dashed #d7dde4;
            border-radius: 4px;
            text-align: center;

            overflow: hidden;
            transition: border-color 0.2s ease;

            .file {
                display: none;
            }

            .btn {
                position: absolute;
                top: 0;
                left: 0;
                width: 60px;
                height: 60px;
                background: rgba(0, 0, 0, 0);
                z-index: 10;
                border: none;
                cursor: pointer;
            }

            .camera {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 30px;
                height: 30px;
                transform: translate(-50%, -50%);
                font-size: 28px;
                cursor: pointer;
                background: url("../assets/xj.png");
                background-size: 30px 30px;

            }
        }
    }

    .big-pic {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 9999;

        img {
            position: absolute;
            width: 700px;
            height: auto;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }
}
</style>
<style>
.ivu-form .ivu-form-item-label {
    font-size: 14px;
    color: #45484c;
}
</style>
